/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../../styles' as styles;
@use '../../styles/tokens' as awsui;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;

.content,
.description,
.label {
  display: block;
}

.label {
  color: awsui.$color-text-form-default;
}

.outline {
  display: none;
  &.show-outline {
    display: block;
  }
}

.native-input {
  @include focus-visible.when-visible {
    & + .outline {
      display: block;
    }
  }
}

.wrapper {
  @include styles.text-wrapping;
  display: flex;
}

.label-wrapper {
  position: relative;
  display: flex;
  cursor: default;
}

.content {
  @include styles.text-wrapping;
}
.empty-content {
  inline-size: 0px;
}

.description {
  @include styles.form-control-description;
  &-bottom-padding {
    padding-block-end: awsui.$space-scaled-xxs;
  }
}

.label,
.description {
  padding-inline-start: awsui.$space-xs;
  &-disabled {
    color: awsui.$color-text-control-disabled;
  }
}

.control {
  position: relative;
  /* stylelint-disable selector-max-type */
  & > input,
  & > svg,
  & > .outline {
    position: absolute;
    inline-size: 100%;
    block-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
  }
  & > input {
    opacity: 0;
    z-index: 1;
    user-select: none;
    cursor: default;
    margin-block: 0;
    margin-inline: 0;
  }
  /* stylelint-enable selector-max-type */
}
